import React, { useState } from "react";
import ReactEcharts from "echarts-for-react";
import ChartsWrap from "components/charts/chartsWrap";
import config from "src/config";
import ValueDrawer from "./valueDrawer";

const getPieDataByType = type => {
  switch (type) {
    case "huan": {
      return {
        radius: ["45%", "75%"],
        label: {
          normal: {
            show: false,
            position: "center"
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: "20",
              fontWeight: "bold"
            }
          }
        }
      };
    }
    default: {
      return {
        radius: "75%",
        label: {
          show: true,
          normal: {
            show: true,
            position: "outer"
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: "20",
              fontWeight: "bold"
            }
          }
        }
      };
    }
  }
};

const filterData = (data, index) => {
  let legendData = [],
    seriesData = [],
    rangeData = [];
  for (let key in data) {
    data[key].dataList[index] &&
      seriesData.push({
        name: data[key].name,
        value: data[key].dataList[index].data.data
      });
    legendData.push(data[key].name);
    if (rangeData.length === 0) {
      rangeData = data[key].dataList.map(item => parseInt(item.code.slice(-4)));
    }
  }
  return { legendData, seriesData, rangeData };
};

const PieChart = ({
  title = "数据展示",
  name = "",
  nationalData,
  data = []
}) => {
  // 改变主题
  const [theme, changeTheme] = useState("walden");
  const handleChangeTheme = () => {
    const themes = config.themes;
    const index = themes.indexOf(theme);
    if (index >= themes.length - 1) {
      changeTheme(themes[0]);
    } else {
      changeTheme(themes[index + 1]);
    }
  };

  // 改变展示类型 环形图/饼状图
  const [pieType, chengePieType] = useState("bing");

  //当前展示数据的时间
  const [currentYearIndex, changeCurrentYearIndex] = useState(0);
  // 范围选择模态框
  const [visibale, changeVisibale] = useState(false);
  const handleChangeCUrrentYearIndex = value => {
    changeVisibale(false);
    changeCurrentYearIndex(value);
  };

  // 过滤数据
  const { legendData, seriesData, rangeData } = filterData(
    nationalData,
    currentYearIndex
  );

  const getOption = data => {
    const typeDate = getPieDataByType(pieType);
    return {
      tooltip: {
        trigger: "item",
        formatter: rangeData[currentYearIndex] +"年<br>{b} : {c}{a} ({d}%)"
      },
      toolbox: {
        feature: {
          mytool1: {
            show: true,
            title: "环形图",
            onclick: function() {
              chengePieType("huan");
            },
            icon:
              "path://M512 0C229.517241 0 0 229.517241 0 512S229.517241 1024 512 1024 1024 794.482759 1024 512 794.482759 0 512 0z m17.655172 35.310345c247.172414 10.593103 448.441379 211.862069 459.034483 459.034483h-176.551724c-7.062069-151.834483-130.648276-271.889655-282.482759-282.482759V35.310345z m247.172414 476.689655c0 144.772414-120.055172 264.827586-264.827586 264.827586S247.172414 656.772414 247.172414 512 367.227586 247.172414 512 247.172414s264.827586 120.055172 264.827586 264.827586zM512 988.689655C250.703448 988.689655 35.310345 773.296552 35.310345 512 35.310345 257.765517 240.110345 45.903448 494.344828 35.310345v176.551724c-158.896552 10.593103-282.482759 137.710345-282.482759 300.137931 0 165.958621 134.17931 300.137931 300.137931 300.137931 74.151724 0 144.772414-28.248276 197.737931-74.151724l123.586207 123.586207C748.57931 939.255172 635.586207 988.689655 512 988.689655z m346.041379-151.834483l-123.586207-123.586206c45.903448-49.434483 74.151724-112.993103 77.682759-183.613794h176.551724c-7.062069 120.055172-52.965517 225.986207-130.648276 307.2z"
          },
          mytool2: {
            show: true,
            title: "饼状图",
            onclick: function() {
              chengePieType("bing");
            },
            icon:
              "path://M512 0C229.517241 0 0 229.517241 0 512S229.517241 1024 512 1024 1024 794.482759 1024 512 794.482759 0 512 0z m17.655172 35.310345c247.172414 10.593103 448.441379 211.862069 459.034483 459.034483H529.655172V35.310345z m-17.655172 953.37931C250.703448 988.689655 35.310345 773.296552 35.310345 512 35.310345 257.765517 240.110345 45.903448 494.344828 35.310345v469.627586c-3.531034 7.062069-3.531034 14.124138 3.531034 21.186207l335.448276 335.448276C748.57931 939.255172 635.586207 988.689655 512 988.689655z m346.041379-151.834483L550.841379 529.655172H988.689655c-7.062069 120.055172-52.965517 225.986207-130.648276 307.2z"
          },
          mytool3: {
            title: "显示范围",
            onclick: function() {
              changeVisibale(true);
            },
            icon:
              "path://M972.8 750.08H714.24c-9.216 0-16.896-7.68-16.896-16.896 0-9.216 7.68-16.896 16.896-16.896H972.8c9.216 0 16.896 7.68 16.896 16.896 0 9.728-7.168 16.896-16.896 16.896z m0-140.288H714.24c-9.216 0-16.896-7.68-16.896-16.896 0-9.216 7.68-16.896 16.896-16.896H972.8c9.216 0 16.896 7.68 16.896 16.896 0 9.728-7.168 16.896-16.896 16.896zM859.136 250.368l-291.328 271.36v424.96c0 9.216-7.68 16.896-16.896 16.896-9.216 0-16.896-7.68-16.896-16.896v-422.4c-3.584-6.656-2.048-14.336 3.072-19.968l241.664-225.28h-2.56l45.568-45.568c8.192-5.632 15.36-12.288 20.992-20.992l1.024-1.024h-0.512c7.168-11.264 11.776-24.576 11.776-39.424 0-40.448-32.768-72.704-73.216-72.704H140.288v0.512c-37.888 3.072-67.584 34.304-67.584 72.704 0 14.336 4.096 28.16 11.776 39.424h-0.512l0.512 0.512c6.144 9.728 14.848 17.408 24.576 23.04l75.776 71.68h1.024l147.968 135.68c1.024 1.024 1.536 2.048 2.56 3.072 4.096 3.072 6.656 7.68 6.656 13.312v314.368c0 9.216-7.68 16.896-16.896 16.896-9.216 0-16.896-7.68-16.896-16.896v-307.2L84.992 259.584c-27.648-19.456-45.568-51.2-45.568-87.552 0-55.808 43.008-101.376 97.28-105.984 1.024-0.512 2.56-0.512 3.584-0.512h646.656c1.536 0 2.56 0 3.584 0.512 54.784 4.608 97.28 50.688 97.28 105.984 0 25.6-9.216 49.664-24.576 68.096 0.512 3.584-1.024 7.168-4.096 10.24zM714.24 867.84H972.8c9.216 0 16.896 7.68 16.896 16.896 0 9.216-7.68 16.896-16.896 16.896H714.24c-9.216 0-16.896-7.68-16.896-16.896 0-9.216 7.68-16.896 16.896-16.896z"
          },
          saveAsImage: {
            show: true,
            name: title,
            pixelRatio: 2
          },
          dataView: {},
          restore: {}
        }
      },
      legend: {
        orient: "vertical",
        left: "left",
        data: legendData
      },
      series: [
        {
          name: name,
          type: "pie",
          radius: typeDate.radius,
          center: ["50%", "60%"],
          data: seriesData,
          label: typeDate.label,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    };
  };

  return (
    <ChartsWrap title={title} handleClick={handleChangeTheme} text="切换主题">
      <ValueDrawer
        rangeData={rangeData}
        changeVisibale={changeVisibale}
        visibale={visibale}
        callback={handleChangeCUrrentYearIndex}
      />
      <ReactEcharts theme={theme} option={getOption(data)} />
    </ChartsWrap>
  );
};

export default PieChart;
